@import "reset.css";


body {
	box-sizing: content-box;
	position: relative;
	transition: .3s all;
}

#tabs {
	width: 180px;
	list-style: none;
	border-radius: 10px;
	user-select: none;
	transition: 0.5s all;

	li {
		width: 180px;
		padding: 15px 0;
		font-size: 12px;
		letter-spacing: 1px;
		text-align: center;
		white-space: nowrap;
		cursor: pointer;
		transition: 0.3s all;

		&:hover {
			background-color: #ececec;
		}

		&.selected {
			color: #fff;
		}

		&.system.selected {
			background: linear-gradient(to left, #19fff3, #12D8FA, #45c7ff);
		}

		&.fixed_servers.selected {
			background: linear-gradient(to right, #3aec7e, #18e3d2);
		}

		.proxy-msg {
			margin-top: 4px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	#retween-proxy-btn {

		&:hover {
			.proxy-list {
				left: -0.09%;
			}
		}

		.proxy-list {
			position: absolute;
			top: 0;
			left: -1000%;
			width: 220px;
			height: 136px;

			overflow-x: hidden;
			overflow-y: auto;
			transition: .2s all;

			&::-webkit-scrollbar {
				width: 3px;

				&-thumb {
					background-image: linear-gradient(to top, #3aec7e, #18e3d2);
				}
			}

			li {
				color: #000;
				width: 100%;
				text-align: center;

				&.selected {
					color: #fff;
					background-image: linear-gradient(to top, #3aec7e, #18e3d2);
				}
			}
		}
	}
}



.settings-wrap {
	@extend #tabs;
}